<template>
  <section class="page upload-waper">

    <transition name="lpop">
      <div class="upload-box" v-show="status == 0">
        <div class="upload-contrl-waper"
          v-show="!previewList.length"
          @dragenter="handleDrop"
          @dragover="handleDrop"
          @drop="handleDrop"
          >
          <div class="upload-contrl">
            <div class="btn-download">
                <i class="el-icon-plus"></i>
            </div>
            <p class="title">拖拽文件到这里</p>
            <p class="caption">或者你也可以点击浏览上传</p>
            <span class="desc">最大支持 500M 文件，会员可扩展到 10G</span>
          </div>
          <input class="input" type="file" @change="changeFile" multiple>
        </div>

        <div class="uplist-waper"
          v-show="previewList.length"
          @dragenter="handleDrop"
          @dragover="handleDrop"
          @drop="handleDrop"
          >
          <div class="hw-list">
            <div class="hw-header">
              {{previewList.length}} 个文件, 共 {{$fn.turnSize(totalSize)}}B,
              还可以上传 {{$fn.turnSize(laveSize)}}B
              <span class="share-next"
                @click="() => { this.fileList && (this.status = 1) }">分享</span>
            </div>
            <div class="hw-content">

              <div class="upload-list" v-show="previewList.length" ref="uplist">
                <ul class="up-list-inner">
                  <li class="up-li-item" v-for="(item, index) in previewList" :key="index">
                    <div class="info">
                      <p class="title">{{ item.file.name }}</p>
                      <span class="size">
                        {{ $fn.turnSize(item.file.size) }} ·
                        {{ item.file.type || '未知类型' }}
                        </span>
                    </div>
                    <Progress :s="item.s"></Progress>
                    <i class="close-ctl" @click="removeItem(index)" title="移除">&times;</i>
                  </li>
                </ul>
              </div>

            </div>
          </div>
          <div class="download-ctl-box">
            <div class="btn-in-download">
              <i class="el-icon-plus"></i>
            </div>
            <div class="down-info">
              <h4 class="title">上传更多文件</h4>
              <p class="desc">最大支持 500M 文件，会员可扩展到 10G</p>
            </div>
            <input class="input" type="file" @change="changeFile" multiple>
          </div>

        </div>
      </div>
    </transition>

    <transition :name="status == 1? 'rpop': 'lpop'">
      <div class="upload-box" v-show="status == 1">
        <div class="uplist-waper">
          <div class="hw-header">
            {{previewList.length}} 个文件, 共 {{$fn.turnSize(totalSize)}}B
            <span class="share-next" @click="save">下一步</span>
          </div>
          <div class="hw-content">
            <div class="hw-con-inner">
              <div class="layer">
                <textarea v-model.trim="description" placeholder="简单介绍一下"></textarea>
              </div>
              <div class="layer">
                <span class="tip">下载有效时间</span>
                <el-input v-model.trim="hasTime" readonly disabled></el-input>
              </div>

              <div class="layer">
                <span class="tip">访问密码</span>
                <el-switch
                  v-model="passOpen"
                  active-text="可自动生成4位数的密码">
                </el-switch>
              </div>

              <div style="margin-top:80px">
                <el-button class="btn-block" type="primary" @click="save">生成分享链接</el-button>
              </div>

            </div>
          </div>
        </div>
      </div>
    </transition>

    <transition name="rpop">
      <div class="upload-box" v-show="status == 2">
        <div class="uplist-waper">
          <div class="hw-header">
            {{previewList.length}} 个文件, 共 {{$fn.turnSize(totalSize)}}B
          </div>

          <div class="hw-content">
            <div class="hw-con-inner">

              <div class="layer">
                <span class="tip">分享链接</span>
                <el-input v-model="resLink" readonly></el-input>
              </div>

              <div class="layer" v-show="passOpen">
                <span class="tip">访问密码</span>
                <el-input v-model="pwd" readonly></el-input>
              </div>

              <div style="margin-top:212px">
                <el-button class="btn-block" type="primary" @click="shareView">预览</el-button>
              </div>

            </div>
          </div>

        </div>
      </div>
    </transition>


  </section>
</template>

<script>
import axios from 'axios';
import { upFileHttp } from '../mixin/util';
import Progress from './Progress';

const TOTAL = (1024**2)*500;

export default {
  name: 'UploadBox',
  components: { Progress },
  data() {
    return {
      fileList: [],
      previewList: [],
      description: '',
      passOpen: false,
      cacheLen: 0,

      resLink: '',
      pwd: '',
      success: false,
      disabled: false,
      hasTime: '7天',
      status: 0,
    }
  },
  watch: {
    previewList(v) {
      this.$store.commit('SET_CACHEFILE', v);
    }
  },
  computed: {
    totalSize() {
      if (!this.previewList.length) {
        return 0
      }

      let size = 0;
      for (let i in this.previewList) {
        size+= this.previewList[i].file.size;
      }

      return size;
    },
    laveSize() {
      return TOTAL - this.totalSize;
    }
  },
  methods: {
    // 上传
    upLoadFile(item) {
      const file = item.file;
      const name = file.name;
      const formData = new FormData();

      formData.append('file', file);

      item.s = 'START';
      upFileHttp({
        url: '/upload',
        type: 'POST',
        data: formData,
        onProgress(e) {
          item.s = e.percent;
        },
        onSuccess: (res) => {
          item.s = 'STOP';
          this.fileList.push(res);
        },
        onError(err) {
          item.s = 'ERR';
          console.log(err);
        }
      });
    },

    // 保存并生成链接
    save() {
      if (this.passOpen) {
        this.pwd = this.$fn.randomPwd();
      }

      axios.post('/save', {
        fileList: this.fileList,
        fileIds: this.fileList.map(v => v.id),
        description: this.description,
        filesize: this.totalSize,
        password: this.pwd
      }).then(res => {
        this.resLink = location.origin + res.data.url;
        this.success = true;
        this.status = 2
      }).catch(err => {
        console.log(err);
      });
    },

    // 整理文件
    changeFile(e) {
      [].forEach.call(e.currentTarget.files, file => this.addItem(file));
    },

    // 拖放文件
    handleDrop(event) {
      event.preventDefault();
      if (event.type == "drop") {
        [].forEach.call(event.dataTransfer.files, file => this.addItem(file));
      }
    },

    // 添加一个文件
    addItem(file) {
      // 不能超过文件最大限度
      if (file.size + this.totalSize >= TOTAL) {
        return
      }

      for (let i in this.previewList) {
        if ( this.previewList[i].file.name === file.name ) {
          this.previewList.splice(i, 1);
          break;
        }
      }

      const item = { file, s: '' };
      this.previewList.push(item);
      this.upLoadFile(item);

      this.$nextTick(() => {
        const uplist = this.$refs.uplist;
        const H = uplist.clientHeight;
        const S = uplist.scrollHeight;
        uplist.scrollTo(0, S - H);
      });
    },

    // 移除一个文件
    removeItem(index) {
      this.previewList.splice(index, 1);
    },

    shareView() {
      if (this.resLink) {
        window.location.href = this.resLink;
      }
    },

  }
}
</script>

<style lang="less">
@import '../style/_mixin.less';

@w: 350px;
@h: 450px;

.upload-waper {
  -webkit-perspective: 2000;
  perspective: 2000;
}

.upload-box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: @w;
  height: @h;
  margin-left: -@w/2;
  margin-top: -@h/2 + 20px;

  border-radius: 4px;
  background: #fff;
  box-shadow: 0 18px 32px -6px rgba(0, 0, 0, 0.1);

  transition: all .2s linear;
  overflow: hidden;
}

.upload-contrl-waper {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  transition: all .2s ease-in-out;
  &:hover {
    background: #f1fbfd;
  }
  &:active {
    background: #dbeef1;
  }

  .input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}
.upload-contrl {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  text-align: center;

  .title {
    font-size: 16px;
    color: #212B36;
  }
  .caption {
    font-size: 14px;
    color: #1C1C1C;
    margin-bottom: 15px;
  }
  .desc {
    font-size: 12px;
    color: #808080;
  }
}

.btn-download {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: @theme;
  vertical-align: -5px;
  border-radius: 50%;
  font-size: 23px;
  color: #fff;
  text-align: center;
  line-height: 50px;
  transition: all .2s ease-in-out;
  margin-bottom: 20px;
}


.download-ctl-box {
  position: relative;
  padding: 20px 16px;
  border-top: 1px solid #eee;
  transition: all .2s ease-in-out;
  white-space: nowrap;

  .btn-in-download {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    background: @theme;
    vertical-align: -5px;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    transition: all .2s ease-in-out;
  }
  .down-info {
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px;

    .title {
      font-size: 16px;
      color: #020b15;
    }
    .desc {
      font-size: 12px;
      color: #7d7d7d;
    }
  }
  .input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
  }
}

.uplist-waper {
  .hw-list {
    position: relative;
    height: @h - 83px;
  }
  .hw-header {
    font-size: 12px;
    background: @theme;
    color: #fff;
    padding: 6px 14px;
    height: 30px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .hw-content {
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .share-next {
    display: block;
    float: right;
    cursor: pointer;
    user-select: none;
  }
}


.upload-list {
  padding: 4px 14px;
  max-height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.up-li-item {
  position: relative;
  list-style: none;
  border-bottom: 1px dotted #ddd;
  padding: 6px 0;

  &:last-child {
    border-bottom: none;
  }

  .info {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    width: 100%;
    padding-right: 30px;
    box-sizing: border-box;
  }
  .title {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
  }
  .size {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
  }
  .close-ctl {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -10px;
    display: block;
    font-size: 15px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    font-style: normal;
    text-align: center;
    line-height: 15px;
    border: 1px solid #ddd;
    color: #ddd;
    cursor: pointer;
    transition: all .2s ease;
    user-select: none;

    &:hover {
      border: 1px solid #409EFF;
      color: #409EFF;
    }
  }
}

.hw-con-inner {
  padding: 14px;

  .layer {
    margin-bottom: 10px;
  }

  .tip {
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
  }

  textarea {
    width: 100%;
    height: 136px;
    resize: none;
    border: 1px solid #ddd;
    padding: 8px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 4px;
    font-family: inherit;
    outline: none;
  }
}


.lpop-enter-active,
.lpop-leave-active {
    transition: all .4s ease-in-out;
}
.lpop-enter-active {
    transition-delay: 0.2s;
}
.lpop-enter,
.lpop-leave-active {
    opacity: 0;
    transform: translateX(-30%) rotate3d(0, 1, 0, -40deg);
}

.rpop-enter-active,
.rpop-leave-active {
    transition: all .4s ease-in-out;
    transition-delay: 0.2s;
}

.rpop-enter,
.rpop-leave-active {
    opacity: 0;
    transform: translateX(30%) rotate3d(0, 1, 0, 40deg);
}
</style>
